<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>招聘数据可视化分析系统 - 首页</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>

<body>
    <div class="dashboard">
        <header>
            <h1>招聘数据可视化分析系统</h1>
            <form action="/logout" method="post">
                <button type="submit">退出登录 (admin)</button>
            </form>
        </header>
        <div class="sidebar">
            <h2>菜单导航</h2>
            <ul>
                <li><a href="/home" class="active">首页</a></li>
                <li><a href="/profile">个人中心</a></li>
                <li><a href="/statistics">数据统计</a></li>
                <li><a href="/charts">可视化图表</a></li>
            </ul>
        </div>
        <div class="main-content">
            <div class="main-content-inner">
                <h2 class="page-title">系统首页</h2>
                <div class="dashboard-layout">
                    <!-- 左侧：饼状图和用户信息表单 -->
                    <div class="left-panel">
                        <!-- 用户创建时间饼状图 -->
                        <div class="chart-container">
                            <h3>用户创建时间分布</h3>
                            <div class="pie-chart-placeholder">
                                <p>饼状图占位符</p>
                                <p>（此处将显示用户创建时间的饼状图）</p>
                            </div>
                        </div>

                        <!-- 用户信息表单 -->
                        <div class="form-container">
                            <h3>用户信息</h3>
                            <form id="user-info-form">
                                <div class="form-group">
                                    <label for="username">用户名:</label>
                                    <input type="text" id="username" name="username" value="admin"
                                        readonly>
                                </div>
                                <div class="form-group">
                                    <label for="email">邮箱:</label>
                                    <input type="email" id="email" name="email" placeholder="请输入邮箱">
                                </div>
                                <div class="form-group">
                                    <label for="phone">手机号:</label>
                                    <input type="tel" id="phone" name="phone" placeholder="请输入手机号">
                                </div>
                                <div class="form-group">
                                    <label for="department">部门:</label>
                                    <input type="text" id="department" name="department" placeholder="请输入部门">
                                </div>
                                <div class="form-group">
                                    <button type="submit">保存信息</button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- 右侧：统计数据面板 -->
                    <div class="right-panel">
                        <!-- 数据总量统计 -->
                        <div class="stat-card">
                            <h3>数据总量统计</h3>
                            <div class="stat-item">
                                <p class="stat-label">职位总数</p>
                                <p class="stat-value">275</p>
                            </div>
                            <div class="stat-item">
                                <p class="stat-label">公司总数</p>
                                <p class="stat-value">32</p>
                            </div>
                        </div>

                        <!-- 用户数据统计 -->
                        <div class="stat-card">
                            <h3>用户数据统计</h3>
                            <div class="stat-item">
                                <p class="stat-label">注册用户</p>
                                <p class="stat-value">6</p>
                            </div>
                            <div class="stat-item">
                                <p class="stat-label">活跃用户</p>
                                <p class="stat-value">6</p>
                            </div>
                        </div>

                        <!-- 行业最高学历 -->
                        <div class="stat-card">
                            <h3>行业最高学历</h3>
                            <div class="stat-item">
                                <p class="stat-label">技术岗位</p>
                                <p class="stat-value">硕士</p>
                            </div>
                            <div class="stat-item">
                                <p class="stat-label">管理岗位</p>
                                <p class="stat-value">博士</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>